<template>
  <div class="footerBox">
    <div class="footerCointent flex-left-nowrap pdtb-30">
      <div class="flex-start flex-1">
        <div class="flex-1">
          <h2 class="font-24 fontW-8 theme-color">{{$t('footer.resources')}}</h2>
          <div>
            <div class="color-a font-20 fontW-8" v-for="item in $t('footer.resourcesList')" :key="item.id" @click="jumpTo(item)">{{ $t(item.value) }}</div>
          </div>
        </div>
        <div class="flex-1">
          <h2 class="font-24 fontW-8 theme-color">{{$t('footer.company')}}</h2>
          <div>
            <div class="color-a font-20 fontW-8" v-for="item in $t('footer.companyList')" :key="item.id">{{ $t(item.value)}}</div>
          </div>
        </div>
      </div>
      <div class="flex-1">
        <div class="logo">
          <img src="../assets/logo/logo.png" alt="">
        </div>
        <div class="color-f mgt-20 font-30 fontW-7 font-f-ib">{{$t('footer.text')}}</div>
        <div class="color-f mgt-20 font-30 fontW-7 font-f-ib">{{$t('footer.text_a')}}</div>
        <div class="email mgt-20 flex-left-nowrap">
          <el-input class="font-24 fontW-8" v-model="emailAddress" :placeholder="$t('footer.placeholder')"></el-input>
          <el-button class="mgl-13 color-0 font-24 fontW-8" type="primary" @click="confirm">{{$t('footer.submit')}}</el-button>
        </div>
        <div class="wechat mgt-20 flex">
          <!-- <div>
            <img class="mgr-20" src="../assets/chat/twitter.svg" alt="">
            <img class="mgr-20" src="../assets/chat/facebook.svg" alt="">
            <img class="mgr-20" src="../assets/chat/instagram.svg" alt="">
            <img class="mgr-20" src="../assets/chat/discord.svg" alt="">
            <img class="mgr-20" src="../assets/chat/reddit.svg" alt="">
            <img class="mgr-20" src="../assets/chat/youtube.svg" alt="">
            <img class="mgr-20" src="../assets/chat/github.svg" alt="">
            <img class="mgr-20" src="../assets/chat/wechat.svg" alt="">
            <img src="../assets/chat/send.svg" alt="">
          </div> -->
          <div v-for="item in AccountList" :key="item.id">
            <a :href="item.Account">
              <img class="mgr-20" :src="item.Thumb" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="footercopy flex-left-nowrap font-15">
      <div class="color-a flex-1">
        <span class="pdr_10">Privacy Policy</span>
        <span> Terms of Service</span>
      </div>
      <div class="color-a flex-1">©  2022 ImeetNFT</div>
    </div>
  </div>
</template>
<script>
import {RegularEmail, MessagePormpt} from '../Js/common'
const data = [
  {id: 0, name: '帮助中心'},
  {id: 1, name: '事件'},
  {id: 2, name: '伙伴'},
  {id: 3, name: '关于交易费'},
  {id: 4, name: '博客'},
  {id: 5, name: '文档'},
  {id: 6, name: '即时通讯'}
]
const dataC = [
  {id: 0, name: '关于'},
  {id: 1, name: '职业生涯'},
  {id: 2, name: '风险投资'},
  {id: 3, name: '捐款'}
]
export default {
  props: ['AccountList'],
  data () {
    return {
      data: data,
      dataC: dataC,
      emailAddress: '',
      langType: localStorage.getItem('language')
    }
  },
  methods: {
    jumpTo: function (item) {
      console.log(item)
      if (item.id === 0) {
        window.open('http://imeetnft.io:8181/docs/test', '_blank')
      }
    },
    confirm: function () {
      let regEmail = RegularEmail(this.emailAddress)
      if (this.emailAddress === '') {
        let langObj = {
          zh_cn: '邮箱不能为空',
          en: 'E-mail can not be empty',
          ru: 'Укажите адрес электронной почты.',
          zh_tw: '郵箱不能為空'
        }
        MessagePormpt(this.langType, langObj)
      } else {
        if (regEmail === false) {
          let langObj = {
            zh_cn: '邮箱格式不正确',
            en: 'E-mail format is incorrect',
            ru: 'Неправильный формат электронной почты.',
            zh_tw: '郵箱格式不正確'
          }
          MessagePormpt(this.langType, langObj)
          return false
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.footerBox {
  border-top: 1px solid #d8d8d8;
  .footerCointent {
    width: 94%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    h2 {
      font-family: Inter-ExtraBold;
    }
    .logo {
      img {
        width: 177px;
        height: 34px;
      }
    }
    .wechat {
      img {
        width: 32px;
        height: 32px ;
      }
    }
    .email {
      .el-input {
        width: 478px;
        height: 54px;
        border-radius: 10px;
        background: #D8D8D8;
        box-shadow: inset 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
      }
      /deep/.el-button--primary {
        // width: 145px;
        height: 54px;
        border-radius: 5px;
        background: #7DE9FF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
      }
      /deep/.el-input__inner {
        height: 54px;
        line-height: 54px;
      }
    }
  }
  .footercopy {
    padding: 20px 3%;
    border-top: 1px solid #d8d8d8;
  }
}
</style>
